// dashbard plans

.settingsDashboard-plans-subheader {
    display: flex;
    justify-content: space-between;
    margin-bottom: 1em;
}

.settingsDashboard-plans-subheader .vpnDiscountPanel-container { margin-right: 1em }

.settingsDashboard-plans {
    display: flex;
    width: 100%;
    padding: 34px 0; /* isCurrent */
    @import "dashboard-plan";
}


[class*='Column-container'] {
    flex: 1;
    margin: 4px 4px 0 0; /*shadow+ parent overflow*/
    min-width: 320px;
}

/* context */
.settingsDashboard-plans.free-active .freeColumn-container,
.settingsDashboard-plans.plus-active .plusColumn-container,
.settingsDashboard-plans.professional-active .professionalColumn-container,
.settingsDashboard-plans.visionary-active .visionaryColumn-container {
    border-color: $primary;
    box-shadow: 0px 0px 8px $primary,
                0px 0px 0px 2px $primary;
    border-radius: 0 0 $border-radius $border-radius;
}

.settingsDashboard-plans .isCurrent { display: none }

.settingsDashboard-plans.free-active .freeColumn-container .isCurrent,
.settingsDashboard-plans.plus-active .plusColumn-container .isCurrent,
.settingsDashboard-plans.professional-active .professionalColumn-container .isCurrent,
.settingsDashboard-plans.visionary-active .visionaryColumn-container .isCurrent {
    display: flex;
}


/* gradient */

#pm_settings .settings.settingsDashboard-container,
#pm_settings .settings .row:last-of-type { padding-bottom: 0 }

.settingsDashboard-plans {
    position: relative;
    display: flex;
    align-items: center;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
    background: #FFF no-repeat;
    background-image:
        radial-gradient(farthest-side at 0 50%, $border, rgba(0,0,0,0)),
        radial-gradient(farthest-side at 100% 50%, $border, rgba(0,0,0,0));
    background-position: 0 50%, 100% 50%;
    background-size: 25px 400px;
}

/* overlay of no scrolling */

.settingsDashboard-plans {
    margin: 0 -25px;
    width: calc(100% + 50px);
}

.settingsDashboard-plans::before,
.settingsDashboard-plans::after {
        content: "";
        height: 400px;
        position: static;
        min-width: 25px;
        width: 25px;
        background: #FFF;
}

/* arrow to scroll */

[class*="settingsDashboard-arrowToScroll"] { position: relative }

[class*="settingsDashboard-arrowToScroll"] .arrowsToScroll-button {
    position: absolute;
    top: calc(50% - 15px);
    border-radius: $border-radius;
    background: rgba($secondary, .9);
}

[class*="settingsDashboard-arrowToScroll"] .arrowsToScroll-button:hover { background: $secondary }

[class*="settingsDashboard-arrowToScroll"] .arrowsToScroll-button[data-direction='left'] { left: -10px }
[class*="settingsDashboard-arrowToScroll"] .arrowsToScroll-button[data-direction='right'] { right: -10px }

/* mobile */
body.appConfigBody-is-mobile {
    .settingsDashboard-plans-subheader  { flex-direction: column }
    .settingsDashboard-plans-subheader .vpnDiscountPanel-container { margin-right: 0 }
}
